import React from 'react';

import { ProColumns, ProTable, ProTableProps } from '@/components/Pro';
import { realTimeMonitoringControllerUnitOverview } from '@/services/ess/realTimeMonitoring';

import { useIntl } from 'umi';
import { useSelectedDeviceNode } from '../../SelectedDeviceNodeContext';

// const fetchDictInfo = async () => {
//   // 模拟请求数据
//   const data = [
//     { label: '故障', value: '故障' },
//     { label: '无故障', value: '无故障' },
//   ];
//   return data;
// };

// console.log(fetchDictInfo);

type DataSourceType = API.UnitOverViewDTO;
type ParamsType = API.realTimeMonitoringControllerUnitOverviewParams;

type Props = Pick<ProTableProps<DataSourceType, ParamsType>, 'request'>;

export const BatteryCellOverview: React.FC<Props> = ({ request }) => {
  const deviceNode = useSelectedDeviceNode();
  const intl = useIntl();

  const columns: ProColumns<DataSourceType>[] = [
    {
      title: intl.formatMessage({ id: 'data.s/N' }),
      dataIndex: 'pageIndex',
      valueType: 'index',
      search: false,
    },
    {
      title: intl.formatMessage({ id: 'stationRealtimeMonitoring.sName' }),
      dataIndex: 'name',
      valueType: 'text',
    },
    // {
    //   title: intl.formatMessage({ id: 'stationRealtimeMonitoring.faultStatus' }),
    //   dataIndex: 'faultStatus',
    //   valueType: 'select',
    //   fieldProps: {
    //     maxTagCount: 'responsive',
    //     request: async () => {
    //       const data = await fetchDictInfo('faultStatus');
    //       return data;
    //     },
    //     defaultValue: ['故障', '无故障'],
    //   },
    // },
    // {
    //   title: intl.formatMessage({ id: 'stationRealtimeMonitoring.faults' }),
    //   dataIndex: 'faultCount',
    //   search: false,
    // },
    {
      title: `${intl.formatMessage({ id: 'stationRealtimeMonitoring.current' })}(A)`,
      dataIndex: 'galvanicCurrent',
      search: false,
    },
    {
      title: `${intl.formatMessage({ id: 'stationRealtimeMonitoring.voltage' })}(V)`,
      dataIndex: 'voltage',
      search: false,
    },
    {
      title: intl.formatMessage({ id: 'stationRealtimeMonitoring.temp' }),
      dataIndex: 'temperature',
      search: false,
    },
    {
      title: 'SOC(%)',
      dataIndex: 'soc',
      search: false,
    },
    {
      title: 'SOH',
      dataIndex: 'soh',
      search: false,
    },
  ];

  const defaultRequest: typeof request = async (params, sorter, filter) => {
    console.log(params, sorter, filter);

    const res = await realTimeMonitoringControllerUnitOverview({
      areaId: deviceNode?.areaId?.toString() ?? undefined,
      deviceCode: deviceNode?.deviceCode ?? undefined,
      deviceName: deviceNode?.deviceName ?? undefined,
      deviceType: deviceNode?.deviceType ?? undefined,
      ...params,
    });

    return res;
  };

  return (
    <ProTable<DataSourceType, ParamsType>
      columns={columns}
      request={request || defaultRequest}
      rowKey="unitId"
      search={{
        defaultCollapsed: false,
      }}
      pagination={{
        showQuickJumper: true,
      }}
      dateFormatter="string"
    />
  );
};
